import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  NativeModules,
  DeviceEventEmitter
} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { textA: '123', textB: ''};
  }

  componentWillMount() {
    //监听事件名为nativeCallRn的事件
    DeviceEventEmitter.addListener('nativeCallRn', (e) => {
      //e是原生传过来的参数
      // console.log(e)
      this.setState({ textB: 'nativeCallRn===>>' + e })
    });
  }

  call_button(e) {
    console.log('call_button>>>')
    NativeModules.rnUtils.rnCallNative('hello android')
    this.setState({ textA: '没有返回的方法' })
  }
  call_button_back(e) {
    console.log('call_button_back>>>')
    NativeModules.rnUtils.rnCallNativePrpmise('hello android').then((msg) => {
      console.log('call_button_back   >>>' + msg)
      this.setState({ textA: 'call_button_back   >>>' + msg })
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {this.state.textB}
        </Text>

        <Text style={styles.welcome}>
          {this.state.textA}
        </Text>


        <Button style={styles.welcome} onPress={this.call_button.bind(this)} title="点击向Android发送消息" />


        <Button style={styles.welcome} onPress={this.call_button_back.bind(this)} title="点击向Android发送消息,并接收返回" />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    // justifyContent: 'center',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    margin: 10,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});